<template>
  <div class="searchArea">
    <h1>学生用户信息列表</h1>
    <el-form :inline="true" class="form" label-width="80px">
      <el-form-item label="学号">
        <el-input
          class="studentInput"
          placeholder="请输入学号"
          size="small"
          v-model="studentInfo.studentId"
        ></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input
          class="studentInput"
          placeholder="请输入姓名"
          size="small"
          v-model="studentInfo.name"
        ></el-input>
      </el-form-item>
      <el-form-item label="所属院系">
        <el-select
          v-model="studentInfo.departmentId"
          @change="handleChangeDepartment"
          placeholder="请选择院系"
          size="small"
        >
          <el-option
            v-for="item in departmentList"
            :key="item.departmentId"
            :label="item.departmentName"
            :value="item.departmentId"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-form :inline="true" class="form" label-width="80px">
      <el-form-item label="所属专业">
        <el-select
          v-model="studentInfo.majorId"
          placeholder="请选择专业"
          @change="handleChangeMajorAndEnrollmentYear"
          size="small"
        >
          <el-option
            v-for="item in DepartmentMajor"
            :key="item.majorId"
            :label="item.majorName"
            :value="item.majorId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="年级">
        <el-select
          v-model="studentInfo.enrollmentYear"
          placeholder="请选择年级"
          @change="handleChangeMajorAndEnrollmentYear"
          size="small"
        >
          <el-option
            v-for="(item, index) in EnrollmentYear"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="班级">
        <el-select
          v-model="studentInfo.className"
          placeholder="请选择班级"
          size="small"
        >
          <el-option
            v-for="(item, index) in DepartmentMajorClass"
            :key="index"
            :label="item.className"
            :value="item.className"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          size="small"
          style="margin-left:20px;background-color: rgb(51, 55, 68);
                  color: white;
                  border: 0;"
          @click="searchSubmit"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      studentInfo: {
        studentId: null,
        name: null,
        departmentId: null,
        majorId: null,
        enrollmentYear: null,
        className: null,
      },
      departmentList: [],
      DepartmentMajor: [],
      EnrollmentYear: [],
      DepartmentMajorClass: [],
      //
    };
  },
  methods: {
    // 搜索事件
    searchSubmit() {
      this.checkSearchInfo();
      let options = this.studentInfo;
      this.$http.post(this.$api.StudentSearchInfo, options).then((resp) => {
        if (resp.success) {
          this.$emit("searchSubmit", resp.data);
        } else {
          this.$handleFailResp(this, resp);
        }
      });
    },
    //检查参数
    checkSearchInfo() {
      this.studentInfo.studentId = "" ? null : this.studentInfo.studentId;
      this.studentInfo.name = "" ? null : this.studentInfo.name;
      this.studentInfo.departmentId = "" ? null : this.studentInfo.departmentId;
      this.studentInfo.majorId = "" ? null : this.studentInfo.majorId;
      this.studentInfo.enrollmentYear = ""
        ? null
        : this.studentInfo.enrollmentYear;
      this.studentInfo.className = "" ? null : this.studentInfo.className;
    },
    //返回院系列表
    returnDepartment() {
      this.$http.get(this.$api.InfoDepartment).then((resp) => {
        if (resp.success) {
          this.departmentList = resp.data;
        } else {
          this.$handleFailResp(this, resp);
        }
      });
    },
    //返回年级列表
    returnEnrollmentYear() {
      this.$http.get(this.$api.InfoEnrollmentYear).then((resp) => {
        if (resp.success) {
          this.EnrollmentYear = resp.data.enrollmentYears;
        } else {
          this.$handleFailResp(this, resp);
        }
      });
    },
    // 级联，处理院系选中
    handleChangeDepartment(value) {
      this.returnDepartmentMajor();
      this.studentInfo.majorId = null;
      this.studentInfo.enrollmentYear = null;
      this.studentInfo.className = null;
      this.DepartmentMajorClass= []
    },
    // 级联，处理专业和入学年份选中
    handleChangeMajorAndEnrollmentYear(value) {
      if (
        this.studentInfo.majorId != null &&
        this.studentInfo.enrollmentYear != null
      ) {
        this.returnClass();
        this.studentInfo.className = null;
        this.DepartmentMajorClass= []
      }
    },

    //返回专业
    returnDepartmentMajor() {
      let departmentId = this.studentInfo.departmentId;
      let options = { departmentId: departmentId };
      this.$http.post(this.$api.InfoDepartmentMajor, options).then((resp) => {
        if (resp.success) {
          this.DepartmentMajor = resp.data;
        } else {
          this.$handleFailResp(this, resp);
        }
      });
    },
    //返回班级列表
    returnClass() {
      let options = {
        majorId: this.studentInfo.majorId,
        enrollmentYear: this.studentInfo.enrollmentYear,
      };
      this.$http
        .post(this.$api.InfoDepartmentMajorClass, options)
        .then((resp) => {
          if (resp.success) {
            this.DepartmentMajorClass = resp.data;
          } else {
            this.$handleFailResp(this, resp);
          }
        });
    },
  },
  mounted() {
    this.returnDepartment();
    this.returnEnrollmentYear();
  },
};
</script>

<style scoped>
.el-input {
  width: 220px;
}
.el-select {
  width: 220px;
}
.form {
  height: 50px;
  width: 1050px;
  margin: auto;
  text-align: left;
  padding-left: 70px;
}

.searchArea {
  text-align: center;
}
</style>
